import { Card, Form, Input, InputNumber, Modal, Space, Segmented } from 'antd';
import Table, { ColumnsType } from 'antd/es/table';
import { useEffect } from 'react';

import { useCommon } from '@/hooks/common';

export default function RecommendPage() {
  const uri = 't';
  const cateName = '推广中心';
  const {
    data = {},
    ModalPros,
    handleChange,
    query,
    setQuery,
  } = useCommon({ tuiguangType: '1' }, uri, {});

  const handleTab = (e: any) => {
    setQuery({ ...query, pageNo: 1, tuiguangType: e });
  };

  const columns: ColumnsType<any> = [
    { title: '日期', dataIndex: 'createTime', align: 'center' },
    { title: '编号', dataIndex: 'id', align: 'center' },
    { title: '被推广人', dataIndex: 'userName', align: 'center' },
  ];

  return (
    <Space direction="vertical" size="large" className="w-full">
      {/* <Card>
        <Form form={searchForm} onFinish={onSearch}>
          <Row gutter={[16, 16]}>
            <Col span={8} lg={6}>
              <Form.Item<any> label="会员ID" name="userId" className="!mb-0">
                <Input />
              </Form.Item>
            </Col>
            <Col span={8} lg={6}>
              <Form.Item<any> label="交易类型" name="tradeType" className="!mb-0">
                <Select options={tradeTypeOptions} />
              </Form.Item>
            </Col>
            <Col span={8} lg={6}>
              <Form.Item<any> label="交易方式" name="payType" className="!mb-0">
                <Select options={payTypeOptions} />
              </Form.Item>
            </Col>
            <Col span={24} lg={12}>
              <div className="flex justify-end">
                <Button onClick={onSearchFormReset}>重置</Button>
                <Button type="primary" htmlType="submit" className="ml-4">
                  查询
                </Button>
              </div>
            </Col>
          </Row>
        </Form>
      </Card> */}
      <Card
        title={cateName}
        bordered={false}
        extra={
          <div className="flex flex-row gap-[10px]">
            {/* <Button
              type="primary"
              onClick={() =>
                onCreate({ parentId: query.parentId, level: query.parentId === 0 ? 1 : 2 })
              }
            >
              新增
            </Button> */}
          </div>
        }
      >
        <Segmented
          defaultValue="1"
          options={[
            {
              value: '1',
              label: (
                <div className="flex h-[44px] w-[124px] items-center justify-center text-[20px]">
                  直推用户
                </div>
              ),
            },
            {
              value: '2',
              label: (
                <div className="flex h-[44px] w-[124px] items-center justify-center text-[20px]">
                  间推用户
                </div>
              ),
            },
          ]}
          onChange={handleTab}
        />
        <div className="mt-[20px]">
          <Table
            rowKey="id"
            size="small"
            pagination={{ total: data.totalCount }}
            scroll={{ x: 'max-content' }}
            columns={columns}
            dataSource={data.list}
            onChange={handleChange}
          />
        </div>
      </Card>

      <CommonModal {...ModalPros} />
    </Space>
  );
}

function CommonModal({ title, show, formValue, onOk, onCancel }: any) {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ ...formValue });
  }, [formValue, form]);
  return (
    <Modal
      title={title}
      open={show}
      onOk={() => onOk({ ...formValue, ...form.getFieldsValue() })}
      onCancel={onCancel}
    >
      <Form
        initialValues={formValue}
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item<any> label="姓名" name="userName" required>
          <Input />
        </Form.Item>
        <Form.Item<any> label="登陆账号" name="loginName" required>
          <Input disabled />
        </Form.Item>
        <Form.Item<any> label="手机号" name="phoneNumber" required>
          <InputNumber />
        </Form.Item>
      </Form>
    </Modal>
  );
}
